<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="__CSS__/lib/normalize.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__/mui-3.6.1.min.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__/search-two.css" />
    <link rel="stylesheet" href="__CSS__/my_pullrefresh.css" type="text/css">
    <title>search</title>
</head>

<body>
    <div class="mui-content">
        <div class="top-bar mui-row">
            <div class="return mui-col-sm-2 mui-col-xs-2" onclick="location.href='/Wx/Search/searchF'"></div>
            <div class="top-middle mui-col-sm-8 mui-col-xs-8">
                <div class="s-top-middle">
                    <input type="search" placeholder="" id="serachValue"/>
                </div>
            </div>
            <div id="search"  class="top-right mui-col-sm-2 mui-col-xs-2">搜索</div>
        </div>
    </div>

    <div id="tab">
       <div id="tab-sj-1" class="tab-sj">分类<span class="icon"></span></div>
       <div id="tab-sj-2" class="tab-sj">排序<span class="icon"></span></div>
    </div>

   <!-- 分类 -->
    <div id="tab-classify-cnt">
        <div class="tab-classify">

            <ul id="classify-l">
                    <li data-id="0" class="active">全部<!-- <span class="circle-l circle-active">2526</span> --></li>
                    <foreach name="cate" item="v">
                        <li data-id="{$v['info']['catId']}">{$v['info']['catName']}<span class="circle-l">{$v['info']['count']|default=0}</span></li>
                    </foreach>
            </ul>
            <div>
                <ul class="classify-r">
                    <li class="active">全部</li>
                </ul>
                <foreach name="cate" item="v">

                <ul class="classify-r">
                    <li class="active" data-id="{$v['info']['catId']}">全部<!-- <span class="circle-r circle-active">2526</span> --></li>
                    <foreach name="v['child']" item="k">
                        <li data-id="{$k['info']['catId']}">{$k['info']['catName']}<span class="circle-r">{$v['info']['count']|default=0}</span></li>
                    </foreach>
                </ul>
                </foreach>
            </div>
        </div>
    </div>
    <!-- 排序 -->
    <div id="tab-sort-cnt">
        <ul id="sort">
            <li data-type="zhineng" class="sort-active">智能排序<span class="sort-icon sort-active"></span></li>
            <li data-type="juli">距离最近<span class="sort-icon"></span></li>
            <li data-type="qisongjia">起送价最低<span class="sort-icon"></span></li>
            <li data-type="xiaoliang">销量最高<span class="sort-icon"></span></li>
        </ul>
    </div>



    <div id="slider" class="mui-slider mui-fullscreen">
        <div class="mui-slider-group">
            <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <ul class="mui-table-view" id="view">
            <!-- 商品 -->
                            <li class="mui-table-view-cell mui-table-view-cell-2">
                                <div class="mui-content-2">
                                      <div class="gg  mui-col-xs-3">
                                          <div id="ufo-1"></div>
                                      </div>
                                      <div class="gg mui-col-sm-6 mui-col-xs-6">
                                           <div class="yzg">UFO宇宙锅</div>
                                           <div class="star">
                                               <img src="__IMG__/icon_star_1@2x.png"/>
                                               <img src="__IMG__/icon_star_1@2x.png"/>
                                               <img src="__IMG__/icon_star_1@2x.png"/>
                                               <img src="__IMG__/icon_star_1@2x.png"/>
                                               <img src="__IMG__/icon_star_0@2x.png"/><span>4.0</span>月售4份
                                           </div>
                                           <div class="y-time">预计送达时间: <span>5</span>分钟 / <span>832</span>米</div>
                                           <div class="b-you">
                                               <img src="__IMG__/icon_baoyou@2x.png"/>满100包邮
                                           </div>
                                      </div>
                                      <div class="gg mui-col-sm-2 mui-col-xs-2">
                                          <p class="qsf"><span class="q-sf">50.0</span>元起送</p>
                                          <p class="psf"><span>5.0</span>元配送费</p>
                                      </div>
                                </div>
                                <div class="gg-btm">
                                    <ul>
                                        <li>
                                            <div class="gg-btm-yzg"></div>
                                            <div class="gg-btm-yzgf">宇宙锅午饭</div>
                                            <div class="gg-btm-yzgq">¥15.00</div>
                                        </li>
                                        <li>
                                            <div class="gg-btm-yzg"></div>
                                            <div class="gg-btm-yzgf">宇宙锅午饭</div>
                                            <div class="gg-btm-yzgq">¥15.00</div>
                                        </li>
                                        <li>
                                            <div class="gg-btm-yzg"></div>
                                            <div class="gg-btm-yzgf">宇宙锅午饭</div>
                                            <div class="gg-btm-yzgq">¥15.00</div>
                                        </li>
                                        <li>
                                            <div class="gg-btm-yzg"></div>
                                            <div class="gg-btm-yzgf">宇宙锅午饭</div>
                                            <div class="gg-btm-yzgq">¥15.00</div>
                                        </li>
                                    </ul>
                                </div>
                            </li>
          <!-- 店铺 -->

                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script type="text/javascript" src="__JS__/jquery2.1.1.min.js"></script>
<script type="text/javascript" src="__JS__/mui.js"></script>
<script src="__JS__/mui.pullToRefresh.js"></script>
<script src="__JS__/mui.pullToRefresh.material.js"></script>
<script type="text/javascript" src="__JS__/search-two.js"></script>
<script type="text/javascript" src="__JS__/search_pullrefresh.js"></script>

<script type="text/javascript">



var lei=0; //分类
var paixu='zhineng'; //排序
var shaixuan=0; //筛选
// var longitude=0, latitude=0;
// baiduMap();
var longitude =113.317069,latitude=23.140103; //经纬度
getShops();

function getShops(){
  var data={
        lat: latitude,
        lon: longitude,
        lei: lei,
        paixu: paixu,
        shaixuan: shaixuan,
        key:$('#serachValue').val()
    };
  $.getJSON('/Wx/Shop/getShop',data,function(data){
    var html='';
    $.each(data,function(i,n){
      var score = Math.floor(n['score']);

        html+='  <li class="mui-table-view-cell" onclick="location.href=\'/Wx/Shop/shop?id='+n['shopId']+'\'">';

        html+='    <div class="mui-content-2">';
        html+='          <div class="gg  mui-col-xs-3">';
        html+='              <div class="ufo-2" style="background-image:url("/'+n['shopImg']+'")"></div>';
        html+='          </div>';
        html+='          <div class="gg mui-col-sm-6 mui-col-xs-6">';
        html+='               <div class="yzg">'+n['shopName']+'</div>';
        html+='               <div class="star">';
        for(var i=1;i<=5;i++){
            if(i<=score){
                html+='<img src="__IMG__/icon_star_1@2x.png" width="100%" height="100%">';
            }else if(n['score']*1+0.5==i){
                html+='<img src="__IMG__/icon_star_05@2x.png" width="100%" height="100%">';
            }else{
                html+='<img src="__IMG__/icon_star_0@2x.png" width="100%" height="100%">';

            }
        }
        html+='                   <span>'+(n['score'])+'</span>月售'+n['yue_xiaoliang']+'份';
        html+='               </div>';
        html+='               <div class="y-time">预计送达时间: <span>'+n['deliveryCostTime']+'</span>分钟 / '+n['juli2']+'</div>';
        html+='               <div class="b-you">';
        html+='                   <img src="__IMG__/icon_baoyou@2x.png"/>满'+n['deliveryMoney']+'包邮';
        html+='               </div>';
        html+='          </div>';
        html+='          <div class="gg mui-col-sm-2 mui-col-xs-2">';
        html+='              <p class="qsf"><span class="q-sf">'+n['deliveryFreeMoney']+'</span>元起送</p>';
        html+='              <p class="psf"><span>5.0</span>元配送费</p>';
        html+='          </div>';
        html+='      </div>';
        html+='  </li>';
    })
    $('#view').html(html);
  })
}

$('#search').click(function(){
  getShops();
})

// 分类tab1 功能模块
$('#classify-l li').click(function(){
    $('#classify-l li').removeClass('active');
    $('#classify-l li span').removeClass('circle-active');
    $(this).addClass('active');
    $(this).children('span').addClass('circle-active');
    $('.classify-r').eq($(this).index()).show().siblings().hide();
});

$('.classify-r li').click(function(){
    lei = $(this).data('id');
    $('.classify-r li').removeClass('active');
    $('.classify-r li span').removeClass('circle-active');
    $(this).addClass('active');
    $(this).children('span').addClass('circle-active');
    $('#tab-classify-cnt').slideUp('fast');
    $('#tab-sj-1').toggleClass('tab-active')
    $('#tab-sj-1').children('span').toggleClass('tab-sj-active');
    getShops();
});

</script>
</body>

</html>
